<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
  <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
  <script type="text/javascript" src="/scripts/m.js"></script>
  <link rel="stylesheet" href="/heibing/css/style.css" type="text/css">
  <script language="javascript" type="text/javascript" src="/heibing/js/xiaoshuo.js"></script>
  
  <style>
    .top-bar{
      text-align: center;
    }
    .slide {
    position: relative;
    margin: auto;
    width: 600px;
    height: 300px;
    text-align: center;
    font-family: Arial;
    color: #FFF;
    overflow: hidden;
    
}

.slide ul {
    margin: 10px 0;
    padding: 0;
    width: 9999px;
    transition: all 0.5s;
}

/*//自动播放*/
.slide .slide-auto {
    animation: marginLeft 10.5s infinite;
}

.slide li {
    float: left;
    width: 600px;
    height: 300px;
    list-style: none;
    line-height: 200px;
    font-size: 36px;
}

.slide li:nth-child(1) {
    background: #9fa8ef;
}

.slide li:nth-child(2) {
    background: #ef9fb1;
}

.slide li:nth-child(3) {
    background: #9fefc3;
}

@keyframes marginLeft {
    0% {
        margin-left: 0;
    }

    28.5% {
        margin-left: 0;
    }

    33.3% {
        margin-left: -600px;
    }

    62% {
        margin-left: -600px;
    }

    66.7% {
        margin-left: -1200px;
    }

    95.2% {
        margin-left: -1200px;
    }

    100% {
        margin-left: 0;
    }
}

body{/*设置全局样式*/
            width: 1335px;
            font-size: 14spx;
        }
        .subtitle{
            text-align: left;
            font-size: 18px;
            font-weight: bold;
            padding: 5px 0px 5px 0px;

        }
        
        .jpg{
            width: 600px;height: 300px;
        }
        .ja{
          width:250px;height: 250px;
        }
        
        body{
          margin: 0 auto;
        }
        .ziti{
          color: red;
          font-size: 30px;
        }
        .tuijian{
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          margin-left:200px;
          width: 1000px;
        }
        .tuijian >a{
          margin-top: 20px;
          width: 300px;
        }
  </style>
  
</head>
<body>
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name">
            <h1><a href="travel.html">旅游</a></h1>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <section class="top-bar-section">
          <ul class="left">
            <li class="has-dropdown">
              <a href="road-trip.html">自驾游</a>
              <ul class="dropdown">
                <li><a href="road-trip.html">本地游</a></li>
                <li><a href="road-trip.html">自驾3天2夜</a></li>

              </ul>
            </li>
            <li class="has-dropdown">
              <a href="family-trip.html">亲子游</a>
              <ul class="dropdown">
                <li><a href="family-trip.html">博物馆</a></li>
                <li><a href="family-trip.html">海洋公园</a></li>
               
              </ul>
            </li>
            <li class="has-dropdown">
                <a href="other.html">其他</a>
                <ul class="dropdown">
                  <li><a href="other.html">网红打卡</a></li>
                  <li><a href="other.html">穷游</a></li>
               
                </ul>
              </li>
            </ul>
        </section>
      </nav>
      <div class="slide">
        <ul class="slide-auto">
          <li><a href="road-trip.html"><img class="jpg" src="jpg/xi.jpg" alt=""></a></li>
          <li><a href="family-trip.html"><img class="jpg" src="jpg/hai.jpg" alt=""></a></li>
          <li><a href="other.html"><img class="jpg" src="jpg/hong.jpg" alt=""></a></li>
        </ul>
      </div><br>
      <div class="ziti">推荐</div><br>
    <div class="tuijian"> 
    <a href="road-trip.html"><img class="ja" src="jpg/xi.jpg" alt=""></a>&nbsp;
    <a href="road-trip.html"><img class="ja" src="jpg/sanya.jpg" alt=""></a>&nbsp;
    <a href="other.html"><img class="ja" src="jpg/xian.png" alt=""></a>&nbsp;
    <a href="family-trip.html"><img class="ja" src="jpg/bowu.png" alt=""></a>
    <a href="other.html"><img class="ja" src="jpg/hong.jpg" alt=""></a>
    <a href="road-trip.html"><img class="ja" src="jpg/caiyou.png" alt=""></a>
  </div> 
  
    </body>
    <script>
      $(document).ready(function() {
          $(document).foundation();
      })
      </script>
</html>